<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="${ctp}/css/content.css">
<link rel="stylesheet" type="text/css" href="${ctp}/css/input.css">
<link rel="stylesheet" type="text/css" href="${ctp}/css/weebox.css">
 
<link rel="stylesheet" type="text/css" href="${ctp}/script/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctp}/script/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${ctp}/css/default.css">

<script type="text/javascript" src="${ctp}/script/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="${ctp}/script/jquery.validate.js"></script>

<script type="text/javascript" src="${ctp}/script/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctp}/script/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript" src="${ctp}/script/messages_cn.js"></script>
<script type="text/javascript" src="${ctp}/script/bgiframe.js"></script>
<script type="text/javascript" src="${ctp}/script/weebox.js"></script>
<script type="text/javascript">
	$(function(){
		//对 loginName 实行 Ajax 校验: 校验该 loginName 是否可用. 即在数据表中是否有重复的.
		$("#loginName").change(function(){
			var val = $(this).val();
			val = $.trim(val);
			$(this).val(val);
			
			//若当前文本框中的值和之前的 loginName 一致, 就不要查询数据表了.
			var oldLoginName = $("#oldLoginName").val();
			if(val == oldLoginName){
				return;
			}
			
			var reg = /^[a-zA-Z]\w+\w$/g;
			if(val.length < 6){
				alert("不合法!");
				return;
			}
			
			if(!reg.test(val)){
				alert("不合法!");
				$("#loginlabel").html("不合法.");
				return;
			}else{
				$("#loginlabel").html("");
			}
			
			var url = "${ctp}/emp-validateLoginName";
			var args = {"loginName":val,"date":new Date()};
			$.post(url, args, function(data){
				if(data == "1"){
					alert("可用!");
				}else if(data == "0"){
					alert("已被占用");
				}else{
					alert("验证出错.");
				}
			});
		});
	
		$("#loginName").focus(function(){
			$("#loginlabel").html("");
		});
		
		//使用 jQuery 的  validate 插件完成表单的 JS 验证.
		//$("#employeeForm").validate();
		
		$("#role_a_id").click(function(){
			$.weeboxs.open('#rolebox', {
				title:'分配权限',
				onopen:function() {
					//点击 "分配角色" 时: 把保存的选中状态复制到显示中
					$(":checkbox[name='roles2']").each(function(index){
						var checked = $(this).attr("checked");
						$($(":checkbox[name!='roles2']")[index]).attr("checked",checked);
					});
				},
				onok:function(box){
					//点击 "OK" 时: 把到显示的选中状态复制到保存中.
					$(":checkbox[name!='roles2']").each(function(index){
						var checked = $(this).attr("checked");
						$($(":checkbox[name='roles2']")[index]).attr("checked",checked);
					});
					box.close();
				}
			});
			
			return false;
		});
	})
</script>
</head>
<body>
	<br>
	<s:form action="/emp-save" method="post" id="employeeForm" cssClass="employeeForm">
		<s:if test="employeeId != null">
			<input type="hidden" id="oldLoginName" value="${loginName }"/>
			<s:hidden name="employeeId"></s:hidden>
		</s:if>
		<fieldset>
			<p>
				<label for="message">
					<s:if test="employeeId != null">
						<font color="red">修改员工信息</font>					
					</s:if>
					<s:else>
						<font color="red">添加员工信息</font>
					</s:else>
				</label> 
			</p>
			
			<p>
				<label for="loginName">登录名(必填)</label>
				<s:textfield name="loginName" id="loginName" cssClass="required" minlength="6"></s:textfield>
				<label id="loginlabel" class="error" for="loginname" generated="true">
					<!-- 显示服务器端简单验证的信息 -->
					<s:fielderror fieldName="loginName"></s:fielderror>
				</label>
			</p>
			
			<p>
				<label for="employeeName">姓名 (必填)</label>
				<s:textfield name="employeeName"/>
			</p>
			
			<p>
				<label for="logingallow">登录许可 (必填)</label>
				<s:radio list="#{'1':'允许','0':'禁止' }" name="enabled" cssStyle="border:none"></s:radio>
			</p>

			<p>
				<label for="gender">性别 (必填)</label>
				<s:radio list="#{'1':'男','0':'女' }" name="gender" cssStyle="border:none"></s:radio>
			</p>
			
			<p>
				<label for="dept">部门 (必填)</label>
				<s:select list="#request.departments" listKey="departmentId"
					listValue="departmentName" name="department.departmentId"></s:select>
					
				<label class="error" for="dept" generated="true">
					<font color="red">
						
					</font>
				</label>
			</p>
			
			<p>
				<label for="birth">生日 (必填)</label>
				<s:textfield name="birth"></s:textfield>
			</p>
			
			<p>
				<label for="email">Email (必填)</label>
				<s:textfield name="email"></s:textfield>
				<label class="error" for="email" generated="true">
					<!-- 显示服务器端简单验证的信息 -->
				</label>
			</p>
			
			<p>
				<label for="mobilePhone">电话 (必填)</label>
				<s:textfield name="mobilePhone"></s:textfield>
			</p>

			<p>
				<label for="role"><a id="role_a_id" href="">分配角色(必选)</a></label>
			</p>
			
			<div style="display:none">
				<!-- 有 name 属性, 用来保存选择的状态, 和用来进行提交! -->
				<s:checkboxlist name="roles2" list="#request.roles" listKey="roleId" listValue="roleName"></s:checkboxlist>	
			</div>
			
			<div style="display:none" id="rolebox"> 
				<!-- 用来显示. -->
				<s:iterator value="#request.roles">
					<input type="checkbox" value="${requestScope.roleId }" style="border:none"/>${roleName }
					<br>
				</s:iterator>
			</div>
			
			<p>
				<label for="mobilePhone">创建人</label>
				<s:if test="employeeId == null">
					${sessionScope.employee.loginName }
					<input type="hidden" value="${sessionScope.employee.employeeId }" name="editor.employeeId"/>
				</s:if>
				<s:else>
					${editor.loginName }
				</s:else>
			</p>

			<p>
				<input class="submit" type="submit" value="提交"/>
			</p>
				
		</fieldset>
	</s:form>
	
</body>
</html>